<template>
	<div class="order-item">
		<div class="order-product-header">
			<ul>
				<li class="product-header-information">{{$tc('message.detail')}}</li>
				<li class="product-price">{{$t('message.price')}}</li>
				<li class="product-down-payment">{{$tc('message.downPayment', 2)}}</li>
				<li class="product-period-number">{{$t('message.amortizationNum')}}</li>
				<li class="product-period-payment">{{$t('message.monthPay')}}</li>
				<li class="product-this-payment">{{$t('message.nowPay')}}</li>
			</ul>
		</div>
		<div class="order-product-content">
      <!--商品没有下架-->
      <template v-if="!isSoldOut">
        <ul>
          <li class="product-image">
            <div class="product-item">
              <img v-lazy="order.icon1" />
            </div>
          </li>
          <li class="product-information">
            <div class="product-item">
              <p class="product-information-title">{{ order.goods_name }}</p>
              <p class="product-information-label2">{{$t('message.color')}} : {{ order.sxzh_name }}</p>
              <p class="product-information-label1">{{$t('message.version')}} : {{ order.yjsx_name }}</p>
            </div>
          </li>
          <li class="product-price">
            <div class="product-item">
              {{ order.base_price }}
            </div>
          </li>
          <li class="product-down-payment">
            <div class="product-item">
              {{ isShowDown_payment }}
            </div>
          </li>
          <li class="product-period-number">
            <div class="product-item">
              <!--{{ order.stages || '&#45;&#45;' }}-->
              {{ stageNumber }}
            </div>
          </li>
          <li class="product-period-payment">
            <div class="product-item">
              {{ stage_pay }}
            </div>
          </li>
          <li class="product-this-payment">
            <div class="product-item">
              <!--{{ order.down_payment }}-->
              {{ truePay }}
            </div>
          </li>
        </ul>
        <!--赠品-->
        <ul style="border-top:1px solid #e0e0e0" v-for="(item, index) in order.gives">
          <li class="product-image">
            <div class="product-item">
              <img v-lazy="item.icon1" />
            </div>
          </li>
          <li class="product-information">
            <div class="product-item">
              <p class="product-information-title">{{ item.goods_name }}</p>
              <p class="product-information-label2">{{$t('message.color')}} : {{ item.sxzh_name }}</p>
              <p class="product-information-label1">{{$t('message.version')}} : {{ item.yjsx_name }}</p>
            </div>
          </li>
          <li class="product-price">
            <div class="product-item">
              {{ $t('message.gifts') }}
            </div>
          </li>
          <li class="product-down-payment">
            <div class="product-item">--</div>
          </li>
          <li class="product-period-number">
            <div class="product-item">--</div>
          </li>
          <li class="product-period-payment">
            <div class="product-item">--</div>
          </li>
          <li class="product-this-payment-gifts">
            <div class="product-item">0</div>
          </li>
        </ul>
      </template>
      <!--商品下架-->
      <template v-if="isSoldOut">
        <ul>
          <li class="product-image">
            <div class="product-item sold-out">
              <img v-lazy="order.icon1" />
            </div>
            <div class="img-shade">{{ $t('message.alreadySoldOut') }}</div>
          </li>
          <li class="product-information">
            <div class="product-item sold-out">
              <p class="product-information-title">{{ order.goods_name }}</p>
              <p class="product-information-label2">{{$t('message.color')}} : {{ order.sxzh_name }}</p>
              <p class="product-information-label1">{{$t('message.version')}} : {{ order.yjsx_name }}</p>
            </div>
          </li>
          <li class="product-price">
            <div class="product-item sold-out">
              {{ order.base_price }}
            </div>
          </li>
          <li class="product-down-payment">
            <div class="product-item sold-out">
              {{ isShowDown_payment }}
            </div>
          </li>
          <li class="product-period-number">
            <div class="product-item sold-out">
              <!--{{ order.stages || '&#45;&#45;' }}-->
              {{ stageNumber }}
            </div>
          </li>
          <li class="product-period-payment">
            <div class="product-item sold-out">
              {{ stage_pay }}
            </div>
          </li>
          <li class="product-this-payment">
            <div class="product-item sold-out">
              <!--{{ order.down_payment }}-->
              {{ truePay }}
            </div>
          </li>
        </ul>
        <!--赠品-->
        <ul style="border-top:1px solid #e0e0e0" v-for="(item, index) in order.gives">
          <li class="product-image">
            <div class="product-item sold-out">
              <img v-lazy="item.icon1" />
            </div>
            <div class="img-shade">{{ $t('message.alreadySoldOut') }}</div>
          </li>
          <li class="product-information">
            <div class="product-item sold-out">
              <p class="product-information-title">{{ item.goods_name }}</p>
              <p class="product-information-label2">{{$t('message.color')}} : {{ item.sxzh_name }}</p>
              <p class="product-information-label1">{{$t('message.version')}} : {{ item.yjsx_name }}</p>
            </div>
          </li>
          <li class="product-price">
            <div class="product-item sold-out">
              {{ $t('message.gifts') }}
            </div>
          </li>
          <li class="product-down-payment">
            <div class="product-item sold-out">--</div>
          </li>
          <li class="product-period-number">
            <div class="product-item sold-out">--</div>
          </li>
          <li class="product-period-payment">
            <div class="product-item sold-out">--</div>
          </li>
          <li class="product-this-payment-gifts">
            <div class="product-item sold-out">0</div>
          </li>
        </ul>
      </template>
		</div>
	</div>
</template>

<script>
export default {
  name: 'VOrderItem',
  props: {
    order: {
      type: Object,
      default () {
        return {
          imageSrc: null,
          title: '--',
          label1: '--',
          label2: '--',
          price: '--',
          downPayment: '--',
          periodNumber: '--',
          periodPayment: '--',
          thisPayment: '--'
        }
      }
    },
    isSoldOut: {
      type: Boolean,
      default: false
    },
    switchBuyType: {
      type: [Number, String],
      default: 1
    }
  },
  computed: {
    // 首付款
    isShowDown_payment () {
      if (this.switchBuyType === 1) {
        return '--'
      } else if (this.switchBuyType === 2) {
        /*if (this.order.is_full_amount === 1) {
          this.order.stage_pay = '--'
          return '--'
        }*/
        return this.order.down_payment
      }
    },
    // 分期数
    stageNumber () {
      if (this.switchBuyType === 1) {
        return '--'
      } else if (this.switchBuyType === 2) {
        return this.order.stages + this.$tc('message.amortization', 2)
      }
    },
    // 每期应还
    stage_pay () {
      if (this.switchBuyType === 1) {
        return '--'
      } else if (this.switchBuyType === 2) {
        /*if (this.order.stage_pay) {
          return this.order.stage_pay
        } else {
          return '--'
        }*/
        return this.order.stage_pay
      }
    },
    // 本次付款
    truePay () {
      if (this.switchBuyType === 1) {
        return this.order.base_price
      } else if (this.switchBuyType === 2) {
        return this.order.down_payment
      }
    }
  }
  /*mounted () {
    console.log(this.order, 981)
  }*/
}
</script>

<style scoped>
/*  .product-item {
    color: red!important;
  }*/
.sold-out, .sold-out p {
  color: #A5A5A5!important;
}
.order-item .order-product-header {
  height: 58px;
  border: 1px solid #e0e0e0;
  background-color: #f7f7f7;
}

.order-item .order-product-header ul {
  overflow: hidden;
}

.order-item .order-product-header li {
  float: left;
  font-size: 14px;
  color: #333;
  line-height: 58px;
}

.order-product-header .product-header-information {
  width: 328px;
  padding-left: 23px;
}

.order-item .product-price {
  width: 128px;
  text-align: center;
}

.order-item .product-down-payment {
  width: 142px;
  text-align: center;
}

.order-item .product-period-number {
  width: 142px;
  text-align: center;
}

.order-item .product-period-payment {
  width: 156px;
  text-align: center;
}

.order-item .product-this-payment {
  width: 199px;
  text-align: center;
}


.order-item .product-this-payment-gifts {
  width: 199px;
  text-align: center;
}

.order-item .order-product-content {
	border: 1px solid #e0e0e0;
	border-top: 0;
}

.order-product-content ul {
  overflow: hidden;
}

.order-product-content li {
  float: left;
  height: 147px;
  display: table;
}

.order-product-content .product-item {
  display: table-cell;
  vertical-align: middle;
  height: 20px;
  line-height: 20px;
  color: #333;
}

.order-product-content .product-image {
  padding: 0 24px 0 23px;
  position: relative;
}

.order-product-content .product-image > div {
  width: 100px;
  height: 100px;
}
.order-product-content .product-image .img-shade {
  position: absolute;
  left: 23px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.6);
  color: white;
  font-size: 14px;
  text-align: center;
  line-height: 100px;
}

.order-product-content .product-image img {
  width: 100%;
  height: 100%;
}

.order-product-content .product-information {
  width: 204px;
}

.order-product-content .product-information p {
  width: 180px;
}

.product-information .product-information-title {
  line-height: 20px;
  font-size: 14px;
  color: #333;
}

.product-information .product-information-label1 {
  height: 17px;
  line-height: 17px;
  font-size: 12px;
  color: #666;
  margin-top: 8px;
}

.product-information .product-information-label2 {
  height: 17px;
  line-height: 17px;
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

.order-product-content .product-this-payment > div {
  color: #ff600a;
}

.order-product-content .product-this-payment-gifts > div {
  color: #000;
}
</style>
